<template>
  <div class="wrapper">
    <div class="left">
      <Provice :list="list" :tabIndex="tabIndex" @tabIndex="tabIndexClick"></Provice>
    </div>
    <div class="right">
      <template v-if="list.length">
        <City
          :selectedCity="list[tabIndex].selectedCity"
          :cityItemList="list[tabIndex].children"
          @cityItem="handleCityItem"
          :tabIndex="tabIndex"
        ></City>
      </template>
    </div>
  </div>
</template>

<script>
import Provice from './components/Provice.vue'
import City from './components/City.vue'
export default {
  components: { Provice, City },
  data() {
    return {
      list: [],
      tabIndex: 0,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 城市多选逻辑
    handleCityItem(item) {
      if (this.list[this.tabIndex].selectedCity.indexOf(item.city) === -1) {
        this.list[this.tabIndex].selectedCity.push(item.city)
      } else {
        this.list[this.tabIndex].selectedCity.splice(
          this.list[this.tabIndex].selectedCity.indexOf(item.city),
          1
        )
      }
    },
    // tab切换逻辑
    tabIndexClick(index) {
      this.tabIndex = index
    },
    // 请求数据
    async getData() {
      const res = await this.$http.get('/api/list')
      // 定义一个收集每个省份城市的数据
      res.data.data.forEach((item) => {
        item.selectedCity = []
      })
      this.list = res.data.data
    },
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  height: calc(100vh - 100px);
  display: flex;
  background: lightblue;
  .left {
    flex: 3;
    overflow: auto;
  }
  .right {
    flex: 7;
    overflow: auto;
  }
}
</style>
